<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    body {
        background: linear-gradient(45deg, rgb(255, 198, 198), rgb(255, 255, 178));
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        margin: 0;
    }

    .empty {
        width: 150px;
        height: 150px;
        margin: 10px;
        border: 3px solid black;
        background-color: white;
    }

    .fill {
        background-image: url('https://img1.baidu.com/it/u=3934253456,2142627551&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500');
        width: 145px;
        height: 145px;
        cursor: pointer;
        background-size: cover;
        background-position: center;
    }

    /* 自适应 */
    /* 媒体选择  超大环绕屏 pc电脑 IPAD 手机 */
    @media (max-width: 800px) {

        /* 手机 */
        body {
            flex-direction: column;
        }
    }

    .hold {
        border: 5px solid #ccc;
    }

    .hovered {
        background-color: #c9c9c9;
        border-color: white;
        border-style: dashed;
    }
</style>

<body>
    <div class="empty">
        <!-- draggable 属性 表示元素可以被拖拽 -->
        <div class="fill" draggable="true"></div>
    </div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>

    <script>
        const fill = document.querySelector('.fill');
        const empties = document.querySelectorAll('.empty');
        const body = document.body;
        // 事件委托机制
        fill.addEventListener('dragstart', dragStart);
        fill.addEventListener('dragend', dragEnd);

        for (const empty of empties) {
            empty.addEventListener('dragover', dragOver);
            empty.addEventListener('dragenter', dragEnter);
            empty.addEventListener('dragleave', dragLeave);
            empty.addEventListener('drop', drop);
        }

        function dragStart(e) {
            if (!e.target.classList.contains('fill')) {//不是奶龙
                e.preventDefault();//阻止默认行为
                return;
            }
            fill.classList.add('hold');
            setTimeout(() => {
                fill.className='invisible';
            }, 0);
        }
        function dragEnd(e) {
            fill.className='fill'
        }
        function dragOver(e) {
            event.preventDefault();
        }
        function dragEnter(e) {
            e.preventDefault();
            this.classList.add('hovered');
        }
        function dragLeave(e) {
            this.className = 'empty';
        }
        function drop(event) {
            this.className = 'empty';
            this.append(fill);
        }

    </script>
</body>

</html>